<template>
  <div class="planet">
    <Header title="星球" />
    <div class="page-content">
      <div class="animation-section">
        <div ref="animation" class="lottie-container"></div>
      </div>
      <div class="content-section">
        <transition-group name="text-slide" tag="div" class="text-container">
          <h2 key="title" class="slide-item">星球空间</h2>
          <p key="p1" class="slide-item">这是星球页面的动画展示。动画 C 展现了宇宙的神秘与浩瀚。</p>
          <p key="p2" class="slide-item">通过这个动画，我们可以感受到科技与艺术的完美结合。</p>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
import lottie from 'lottie-web'
import cJson from '../assets/c.json'
import Header from '../components/Header.vue'

export default {
  name: 'Planet',
  components: {
    Header
  },
  mounted() {
    lottie.loadAnimation({
      container: this.$refs.animation,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: cJson
    })
  }
}
</script>

<style scoped>
.planet {
  min-height: 100vh;
}

.page-content {
  padding-top: 44px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.animation-section {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
}

.lottie-container {
  width: 80%;
  height: 80%;
  max-width: 500px;
}

.content-section {
  flex: 1;
  padding: 2rem;
  background: white;
}

h2 {
  color: #333;
  margin-bottom: 1rem;
}

p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.text-container {
  position: relative;
}

.slide-item {
  opacity: 0;
  animation: slideIn 0.6s forwards;
}

.slide-item:nth-child(1) {
  animation-delay: 0.2s;
}

.slide-item:nth-child(2) {
  animation-delay: 0.4s;
}

.slide-item:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 离开动画 */
.text-slide-leave-active {
  position: absolute;
  transition: all 0.3s;
}

.text-slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style> 